<template>
	<view class="spike_goods_item" @click="onPageJump">
		<image :src="item.headImg" mode="aspectFill"></image>
		<view class="goods_item_info">
			<view class="goods_info">
				<view class="title">{{item.name}}</view>
				<view class="other_info">
					<view class="price">
						<text>{{item.integral}}</text>
						<text>积分</text>
					</view>
					<text class="line">|</text>
					<view class="sales">已有{{item.numSales}}人兑换</view>
				</view>
			</view>
			<button>兑换</button>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			item: {
				type: Object,
				default () {
					return {};
				}
			},
			index: {
				type: Number,
				default () {
					return 0;
				}
			}
		},
		methods: {
			onPageJump() {
				uni.navigateTo({
					url: "/pages/integral/goodsDetail?objId=" + this.item.objId
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.spike_goods_item {
		background-color: #ffffff;
		border-radius: 20rpx;
		margin: 0rpx 20rpx 20rpx 20rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 300rpx;
		}

		.goods_item_info {
			padding: 30rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.goods_info {
				width: calc(100% - 130rpx);

				.title {
					font-size: 28rpx;
					color: #333333;
					font-weight: bold;
					@include toe();
				}

				.other_info {
					display: flex;
					align-items: center;
					margin-top: 10rpx;

					.line {
						color: #e5e5e5;
						margin: 0 20rpx;
						font-size: 26rpx;
					}

					.price {
						display: flex;
						align-items: center;

						text {
							&:nth-child(1) {
								font-size: 32rpx;
								color: #ff4040;
								font-weight: bold;
							}

							&:nth-child(2) {
								width: 60rpx;
								height: 30rpx;
								border-radius: 4rpx;
								border: solid 2rpx $themeColor;
								margin-left: 12rpx;
								font-size: 24rpx;
								color: $themeColor;
								text-align: center;
								line-height: 26rpx;
							}
						}
					}

					.sales {
						font-size: 24rpx;
						color: #999999;
					}
				}
			}

			button {
				width: 90rpx;
				height: 40rpx;
				@include theme("gradient_bg");
				border-radius: 20rpx;
				text-align: center;
				line-height: 40rpx;
				font-size: 28rpx;
				color: #ffffff;
				flex-shrink: 0;
				margin: 0 20rpx;
			}
		}
	}
</style>
